<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="app">
        <div class="order-evaluation clearfix">
            <h4>给“新闻订单”的评价</h4>
            <p>请严肃认真对待此次评价哦！您的评价对我们真的真的非常重要！</p>
            <div class="block">  
                <ul>  
                    <li v-for="(isStarActive, index) in stars" :key="index"  
                        @mouseover="hoverStar(index)"  
                        @mouseleave="leaveStar()"  
                        @click="selectStar(index)">  
                      <span>  
                        <img :src="isStarActive ? './x2.png' : './x1.png'">  
                      </span>  
                    </li>  
                  </ul>  
                  
                  <p>{{ list[selectedIndex] || '请评论' }}</p>  
              </div>  
              <div class="order-evaluation-text">  
                本次交易，乖，摸摸头 给您留下了什么印象呢？  
              </div>  
            <div class="order-evaluation-checkbox">
                <ul class="clearfix">
                    <li class="order-evaluation-check" @click="one=!one">专业水平高<span v-show="one==true">√</span></li>
                    <li class="order-evaluation-check" @click="two=!two">交付准时<span v-show="two==true">√</span></li>
                    <li class="order-evaluation-check" @click="three=!three">效果明显<span v-show="three==true">√</span></li>
                    <li class="order-evaluation-check" @click="four=!four">数据分析准确<span v-show="four==true">√</span></li>
                    <li class="order-evaluation-check" @click="five=!five">能力待提高<span v-show="five==true">√</span></li>
                    <li class="order-evaluation-check" @click="six=!six">工期延误<span v-show="six==true">√</span></li>
                </ul>
            </div>
            <div class="order-evaluation-textarea">
                <textarea name="content" id="TextArea1" v-model="leg"></textarea>
                <span>还可以输入<em id="textCount">{{c}}</em>个字</span>
            </div>
            <a href="javascript:;" id="order_evaluation" @click="ale">评价完成</a>
        </div>
        
        <div id="order_evaluate_modal" class="dmlei_tishi_info"></div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const {createApp,ref,computed}=Vue
    createApp({
        setup(){
            let one=ref(false)
            let two=ref(false)
            let three=ref(false)
            let four=ref(false)
            let five=ref(false)
            let six=ref(false)
            let a=ref('200')
            let leg=ref('')
            let list=ref(['差评','较差','一般','较好','好评'])
            let lt=ref()
            let c =computed(()=>a.value- leg.value.length)
            let ale=()=>{
                if(c.value<200){
                alert('提交完成，感谢反馈')
                leg.value=""
                 }else{
                    return
                 }
            }
            const stars = ref(Array(5).fill(false));
            let selectedIndex = ref(-1);
            function hoverStar(index) {  
            for (let i = 0; i <= index; i++) {  
                   stars.value[i] = true;
                   selectedIndex.value = index; 
                }  
            }  
            function leaveStar() {  
               stars.value.fill(false);  
            }  
            function selectStar(index) {  
                hoverStar(index); 
                selectedIndex.value = index; 
            }  
            return {  
            one,
            two,
            three,
            four,
            five,
            six,
            leg,
            c,
            lt,
            ale,
            list,
            stars,  
            selectedIndex,  
            hoverStar,  
            leaveStar,  
            selectStar,  
          };  
        }  
    }).mount('#app')
</script>
</html>